<template>
	<view>
		<view class="card">
			<view class="list" style="padding-bottom: 0;">
				<text class="biaoti">维修详情</text>
			</view>
			<picker :range="pickerArray" @change="onPickerChange" :value="selectedIndex" range-key='name'>
				<view class="list">
					<text class="title">房源名称</text>
					<input type="text" placeholder="请选择" v-model="form.name" disabled />
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="" class="more_icon"></image>
				</view>
			</picker>
			<view class="line" />
			<view class="list">
				<text class="title">房源地址</text>
				<input type="text" placeholder="栋 - 楼层 - 房号" v-model="form.address" disabled />
			</view>
			<view class="line" />
		</view>
		<view class="card">
			<view class="list" style="padding-bottom: 0;">
				<text class="biaoti">房源评价</text>
			</view>
			<view class="list">
				<text class="title">评分</text>
				<uni-rate :touchable="false" active-color="#EE7930;" :size="24" v-model="form.score" />
				<text class="state_text"> {{stateList[form.score]}}</text>
			</view>
			<view class="list">
				<text class="title">整洁度</text>
				<uni-rate :touchable="false" active-color="#EE7930;" :size="24" v-model="form.cleanRate" />
				<text class="state_text"> {{stateList[form.cleanRate]}}</text>
			</view>
			<view class="list">
				<text class="title">服务</text>
				<uni-rate :touchable="false" active-color="#EE7930;" :size="24" v-model="form.serviceRate" />
				<text class="state_text">{{stateList[form.serviceRate]}}</text>
			</view>
			<view class="list">
				<text class="title">评价内容</text>
			</view>
			<view class="list" style="padding-top: 0;">
				<textarea placeholder="请输入（最多允许300字）" v-model="form.content" placeholder-style="color:#ccc;"
					class="textarea" />
			</view>
		</view>
		<view style="width: 100%;height: 200rpx;"></view>
		<view class="bottom_box">
			<view class="add_btn" @click="handleSubmit">
				提交
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		renterPage,
		renterAdd,
		simpleDetail
	} from './js/api.js'
	import http from '../../uitls/http.js';
	const form = reactive({
		name: '',
		address: '',
		score: 0,
		cleanRate: 0,
		serviceRate: 0,
		content: '',
		houseId: ''
	})
	const stateList = ref({
		1: '很遭',
		2: '较差',
		3: '一般',
		4: '还行',
		5: '超赞'
	})
	const paramsData = reactive({
		pageNum: 1,
		pageSize: 50
	})
	const pickerArray = ref([]);
	// 当前选中的索引
	const selectedIndex = ref(0);
	// 选择器改变事件
	const onPickerChange = (e) => {
		selectedIndex.value = e.detail.value;
		let item = pickerArray.value[selectedIndex.value]
		form.name = item.name
		form.address = item.address
		form.houseId = item.id
		console.log('选择了:', item);
	};
	const handleSubmit = () => {
		console.log(form)
		let params = {
			cleanRate: form.cleanRate,
			content: form.content,
			houseId: form.houseId,
			score: form.score,
			serviceRate: form.serviceRate
		}
		if (!form.houseId) return http.isMssage('请选择评价的房源名称')
		if (!form.score) return http.isMssage('请评价')
		if (!form.cleanRate) return http.isMssage('请为整洁度打分')
		if (!form.serviceRate) return http.isMssage('请为服务打分')
		if (!form.content) return http.isMssage('请输入评价内容')
		console.log('params', params)
		setRenterAdd(params)
	}
	const setRenterAdd = async (params) => {
		let res = await renterAdd(params)
		if(res.data.code == 0){
			http.isMssage('感谢您的评价～')
			setTimeout(()=>{
				uni.navigateBack()
			},1000)
			
		}
	}
	const getRenterPage = async () => {
		let res = await renterPage(paramsData)
		let list = res.data.data.list
		pickerArray.value = list
		console.log('res===>', res.data.data.list)
	}
	const getSimpleDetail = async(id)=>{
		let res = await simpleDetail(id)
		console.log('res.data',res.data)
		form.houseId = id
		form.address =res.data.data.address
		form.name = res.data.data.name
		console.log('form',form)
		
	}

	onMounted(() => {
		console.log('开始咯')
		getRenterPage()
	})
</script>
<style>
	page {
		background: #F6F6F6 !important;
	}
</style>
<style lang="less" scoped>
	.card {
		margin-top: 16rpx;
		padding-bottom: 30rpx;
		background: #FFFFFF;

		.list {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			padding: 30rpx;
			background: #FFFFFF;
			position: relative;

			.title {
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				color: #333333;
				font-weight: 400;
				width: 140rpx;
				text-align: left;
			}

			input {
				font-size: 28rpx;
			}

			.more_icon {
				position: absolute;
				right: 30rpx;
				top: 34rpx;
				width: 18rpx;
				height: 36rpx;
			}

			.biaoti {
				font-family: PingFangSC-Semibold;
				font-size: 32rpx;
				color: #000000;
				line-height: 36rpx;
				font-weight: 600;
				margin-right: 16rpx;
			}

			.state_text {
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				color: #CCCCCC;
				font-weight: 400;
				margin-left: 32rpx;
			}

			.textarea {
				width: 658rpx;
				height: 200rpx;
				// margin: auto;
				background: #F8F8F8;
				border: 1rpx solid rgba(238, 238, 238, 1);
				border-radius: 8rpx;
				padding: 16rpx;
				font-size: 28rpx;
			}
		}

		.line {
			background: #eeeeee;
			height: 1rpx;
			margin: 0 30rpx;
		}
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0 60rpx 0;
		background: #FFFFFF;
		width: 100%;

		.add_btn {
			width: 626rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-image: linear-gradient(270deg, #F1B13F 0%, #F8D648 100%);
			border-radius: 50rpx;
			font-family: PingFangSC-Regular;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: 400;
		}
	}
</style>